<template>
    <div class="my-counter">
      <button type="button" class="btn btn-light" :disabled="sum.goods_count===1" @click="sum.goods_count >1 ? sum.goods_count-- : disabled">-</button>
      <input type="number" class="form-control inp" v-model.number="sum.goods_count">
      <button type="button" class="btn btn-light" @click="sum.goods_count++">+</button>
    </div>
  </template>
  
  <script>
  export default {
    props:{
      //接收父组件传过来的值
      sum:Object,
      required:true
    },
    watch:{
      sum:{
        deep:true,
        handler(){
          //监听数据,不能让数据少于1,少于1强制改为1
          if(this.sum.goods_count <1){
            this.sum.goods_count = 1
          }
        }
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .my-counter {
    display: flex;
    .inp {
      width: 45px;
      text-align: center;
      margin: 0 10px;
    }
    .btn, .inp{
      transform: scale(0.9);
    }
  }
  </style>